<template>
    <div class="card-container">
        <lay-breadcrumb>
            <lay-breadcrumb-item v-for="(breadcrumb, index) in breadcrumbs" :key="index">
                {{ breadcrumb.title }}
            </lay-breadcrumb-item>
        </lay-breadcrumb>
    </div>
</template>
<script lang="ts" name="GlobalBreadcrumb" setup>
import { computed } from "vue";
import { useRoute } from "vue-router";
import { getParents } from "../../library/treeUtil";
import { useUserStore } from "../../store/user";
const userStore = useUserStore();
const menusData = userStore.userMenu
const route = useRoute();
const breadcrumbs = computed(() => getParents(menusData, route.path)?.reverse());
</script>
<style scoped>
.card-container {
    background: whitesmoke;
    height: 40px;
    line-height: 40px;
    width: calc(100% - 0px);
    background-color: rgb(255, 255, 255);
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    padding: 0px 10px 0px 10px;
}
</style>
